<!-- 人脉审核 -->
<template>
  <div>
    <div class="table-page-search">
      <a-form>
        <a-form-item label="申请人手机号码">
          <a-input v-model="queryParam.applyUserPhone" placeholder="请输入申请人手机号码" allowClear />
        </a-form-item>
        <a-form-item label="阶段状态">
          <a-select v-model="queryParam.phaseState" placeholder="请选择" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('phaseStateDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-model="queryParam.auditStatus" placeholder="请选择" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('reviewStatusDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申请时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="applyTime" class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div></div>
      <CustomTable :name="$route.name + '_' + type" :columns="columns" :newColumns="newColumns" />
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!-- 阶段状态 -->
      <span slot="phaseState" slot-scope="text">
        <DictTag :options="Dict.getLocal('phaseStateDict')" :value="text" isText />
      </span>

      <!-- 审核状态 -->
      <span slot="auditStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('reviewStatusDict')" :value="text" />
      </span>

      <!-- 用户信息 -->
      <template slot="userInfo" slot-scope="text, record, index">
        <div class="disFlxAC">
          <a-avatar size="default" icon="user" :src="record.applyUserAvatar" />
          <div class="_pl-10 fz-12">
            <div>{{ record.applyUserName }}</div>
            <div>{{ record.applyUserPhone }}</div>
          </div>
        </div>
      </template>

      <!-- 申请类型 -->
      <span slot="orderType" slot-scope="text">
        {{ orderTypeEnum[text] }}
      </span>

      <!-- 申请查看人员 -->
      <template slot="leadingName" slot-scope="text, record, index">
        <div class="disFlxAC">
          <a-avatar size="default" icon="user" :src="record.leadingAvatar" />
          <div class="_pl-10 fz-12">
            <div>{{ record.leadingName }}</div>
          </div>
        </div>
      </template>

      <!-- 操作按钮 -->
      <span slot="action" slot-scope="text, record">
        <a-button
          v-has="'business:people:peopleApproval:detail'"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="handleDetail(record, 'detail')"
        >
          查看详情
        </a-button>
        <a-button
          v-has="'business:people:peopleApproval:edit'"
          v-if="record.auditStatus === reviewStatusEnum.STAY"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="handleDetail(record, 'approval')"
        >
          审核
        </a-button>
      </span>
    </s-table>
    <DetailModal ref="detailModal" />
  </div>
</template>

<script>
import { STable } from '@/components'
import DetailModal from './detailModal.vue'
import { RecordPage, CooperationPage } from '@/api/business/source'
import CustomTable from '@/components/Cuscolumn'
import DictTag from '@/components/DictTag'
import { reviewStatusEnum } from '@/enums/member'
import { orderTypeEnum } from '@/enums/system'

export default {
  props: ['type'],
  components: {
    STable,
    DetailModal,
    CustomTable,
    DictTag,
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        applyUserPhone: undefined,
        phaseState: undefined,
        auditStatus: undefined,
        startTime: undefined,
        endTime: undefined,
        orderType: 'SECRETARIAT',
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '阶段状态',
          dataIndex: 'phaseState',
          ellipsis: true,
          width: '120px',
          scopedSlots: { customRender: 'phaseState' },
        },
        {
          title: '审核状态',
          dataIndex: 'auditStatus',
          ellipsis: true,
          width: '120px',
          scopedSlots: { customRender: 'auditStatus' },
        },

        {
          title: '申请人信息',
          dataIndex: 'userInfo',
          scopedSlots: { customRender: 'userInfo' },
          ellipsis: true,
          width: '200px',
          align: 'left',
        },
        {
          title: '申请人所属组织',
          dataIndex: 'orgName',
          ellipsis: true,
          width: '180px',
        },
        {
          title: '申请业务',
          dataIndex: 'orderType',
          ellipsis: true,
          width: '150px',
          scopedSlots: { customRender: 'orderType' },
        },
        {
          title: '申请人职务',
          dataIndex: 'applylevelName',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '申请查看组织',
          dataIndex: 'toOrgName',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '申请查看人员',
          dataIndex: 'leadingName',
          scopedSlots: { customRender: 'leadingName' },
          ellipsis: true,
          width: '250px',
        },
        {
          title: '查看人员职务',
          dataIndex: 'leadingLevelName',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '需求描述',
          dataIndex: 'remark',
          ellipsis: true,
          width: '220px',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          width: '180px',
        },
        {
          title: '操作',
          width: '170px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
        }
        return (
          this.type === 'inner'
            ? RecordPage(Object.assign(params, this.queryParam))
            : CooperationPage(Object.assign(params, this.queryParam))
        )
          .then((res) => {
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      },
      orderTypeEnum,
      reviewStatusEnum,
    }
  },
  computed: {
    applyTime: {
      get() {
        return [this.queryParam.startTime, this.queryParam.endTime]
      },
      set(val) {
        this.queryParam.startTime = val[0]
        this.queryParam.endTime = val[1]
      },
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name + '_' + this.type]) {
        return this.$options
          .data()
          .columns.filter((v) => {
            const _items = currentColumns[this.$route.name + '_' + this.type].find(
              (item) => item === v.title || item.title === v.title
            )
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    },
  },
  created() {},
  methods: {
    handleDetail(row, type) {
      this.$refs.detailModal.show(row, type, this.type)
    },
    handleReset() {
      Object.keys(this.queryParam).forEach((k) => {
        this.queryParam[k] = undefined
      })
      this.queryParam.orderType = 'SECRETARIAT'
      this.$refs.table.refresh(true)
    },
  },
}
</script>
<style scoped lang="less"></style>
